<template>
  <div class="video">
    <video ref="myvideo" @canplay="getTotal" @timeupdate="timeUpdate" @click="showControls">
      <source :src="src" />
    </video>
   <transition
      enter-active-class="animated fadeIn slow"
      leave-active-class="animated fadeOut slow"
    >
    <div class="controls" v-show="isShow">
      <div class="con_left">
        <!-- 播放与暂停 -->
        <span :class="{'icon-play3':!isPaused,'icon-pause2':isPaused}" @click="togglePlay"></span>
        <!-- 停止 -->
        <span class="icon-stop2" @click="stopPlay"></span>
        <!-- 播放时间/总时长 -->
        <span>{{currentTime}}:{{totalTime}}</span>
      </div>
 
      <div class="con_right" @click="toggleMuted">
        <!-- 声音 -->
        <span :class="{'icon-volume-low':!isMuted,'icon-volume-mute2':isMuted}"></span>
        <!-- 全屏 -->
        <span class="icon-loop" @click="toggleFullScreen"></span>
      </div>
    </div>
    </transition>
  </div>
</template>

<script> 
import 'animate.css'
import '../../lib/mui/styles/style.css'
export default {
  props:['src'],

data(){
  return{
    myvideo:null,
    isPaused:false,
     //标记当前是否静音
    isMuted:false,
    //当前播放时间
    currentTime:'00:00',
    //总时长
    totalTime:'00:00', 
    //标记控制面板是否可见
    isShow:true,
    //startTime开始时间 毫秒为单位
    startTime:0
  }
},

 mounted() {
    // 获取播放器元素
    this.myvideo = this.$refs.myvideo;
    // 记住起始的时间,这个时间可以做为时间间隔的参照
    this.startTime = Date.now()
    // 开户一个定时器
    setInterval(() => {
        if(Date.now() - this.startTime > 5000){
            this.isShow = false
        }
    }, 1000);
  },

  methods:{
    //播放与暂停
    //play播放  pause停止
    //修改播放状态
    togglePlay(){
       this.isPaused = !this.isPaused
      if(this.isPaused){
          this.myvideo.play()
      }else{
        this.myvideo.pause()
      }
    
    },

    //停止播放
    stopPlay(){
      this.myvideo.pause()
      //使用currentTime标记当前播放时间
      this.myvideo.currentTime = 0
      //重置播放状态
      this.isPaused = false
    },

  //时间格式换
  timeFormat (time) {
    let minute = Math.floor(time % 3600 / 60)
    let second = Math.floor(time % 60)
    minute = minute < 10 ? '0' + minute : minute
    second = second < 10 ? '0' + second : second
    return `${minute}:${second}`
},

    //播放时间
    getTotal(){
      this.totalTime = this.timeFormat(this.myvideo.duration)
    },

    //获取当前播放时间
    timeUpdate(){
      this.currentTime = this.timeFormat(this.myvideo.currentTime)
    },

    //静音
    toggleMuted(){
      this.isMuted = !this.isMuted
      this.myvideo.muted =! this.myvideo.muted
    },

    //全屏切换
    toggleFullScreen(event) {
      const myvideo = this.$refs.myvideo;
      // 如果当前是全屏状态，就退出全屏，否则进入全屏状态
      // 获取当前的全屏状态
      let isFullscreen = document.webkitIsFullScreen || document.fullscreen;
      if (!isFullscreen) {
        const inFun =
          myvideo.requestFullscreen || myvideo.webkitRequestFullScreen;
        // 让当前整个播放器进入到全屏状态
        inFun.call(myvideo);
      } else {
        const exitFun =
          document.exitFullscreen || document.webkitExitFullscreen;
        // 退出全屏状态需要使用document
        exitFun.call(document);
      }
    },

   // 显示控制面板
    showControls(){
        this.isShow = true
        // 一定要记得更新起始时间的参照
        this.startTime = Date.now()
    }
  }

 
  }

</script>

<style lang='less' scoped>
.video {
  position: relative;

  video {
    width: 100%;
    height: 100%;
  }
  // div{
  //   border-radius:50px ;
  // }
  .controls {
    width: 100%;
    height: 40px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      padding: 0 5px;
      color: #fff;
    }
  }
}
</style>